<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/@t-design/icons@latest/dist/index.css" rel="stylesheet">
</head>
<body class="bg-gray-50">
    <!-- 顶部导航栏 -->
    <div class="bg-white p-4 border-b border-gray-200">
        <div class="flex items-center">
            <i class="t-icon t-icon-arrow-left text-xl"></i>
            <div class="text-center flex-1 text-lg font-medium">个人中心</div>
            <i class="t-icon t-icon-setting text-xl"></i>
        </div>
    </div>

    <!-- 用户信息卡片 -->
    <div class="bg-white p-6 mb-4">
        <div class="flex items-center">
            <div class="w-16 h-16 rounded-full bg-gray-200 flex items-center justify-center">
                <i class="t-icon t-icon-user text-3xl text-gray-400"></i>
            </div>
            <div class="ml-4">
                <div class="text-lg font-medium">张三</div>
                <div class="text-sm text-gray-500">手机号：138****8888</div>
            </div>
        </div>
    </div>

    <!-- 功能列表 -->
    <div class="bg-white">
        <!-- 渔船管理 -->
        <div class="p-4 border-b border-gray-200">
            <div class="flex items-center">
                <i class="t-icon t-icon-boat text-xl text-blue-600 mr-3"></i>
                <div class="flex-1">我的渔船</div>
                <i class="t-icon t-icon-arrow-right text-gray-400"></i>
            </div>
        </div>

        <!-- 捕捞记录 -->
        <div class="p-4 border-b border-gray-200">
            <div class="flex items-center">
                <i class="t-icon t-icon-fish text-xl text-blue-600 mr-3"></i>
                <div class="flex-1">我的捕捞记录</div>
                <i class="t-icon t-icon-arrow-right text-gray-400"></i>
            </div>
        </div>

        <!-- 企业认证 -->
        <div class="p-4 border-b border-gray-200">
            <div class="flex items-center">
                <i class="t-icon t-icon-company text-xl text-blue-600 mr-3"></i>
                <div class="flex-1">企业认证</div>
                <i class="t-icon t-icon-arrow-right text-gray-400"></i>
            </div>
        </div>

        <!-- 帮助中心 -->
        <div class="p-4 border-b border-gray-200">
            <div class="flex items-center">
                <i class="t-icon t-icon-help text-xl text-blue-600 mr-3"></i>
                <div class="flex-1">帮助中心</div>
                <i class="t-icon t-icon-arrow-right text-gray-400"></i>
            </div>
        </div>

        <!-- 关于我们 -->
        <div class="p-4">
            <div class="flex items-center">
                <i class="t-icon t-icon-info text-xl text-blue-600 mr-3"></i>
                <div class="flex-1">关于我们</div>
                <i class="t-icon t-icon-arrow-right text-gray-400"></i>
            </div>
        </div>
    </div>

    <!-- 退出登录按钮 -->
    <div class="p-6">
        <button class="w-full py-3 border border-red-500 text-red-500 rounded-lg font-medium">退出登录</button>
    </div>
</body>
</html> 